<template>
  <div>
     <div class="weui-header"> 
      <div class="weui-header-left">
        <a href="javascript:void(0)" @click="goDetail()"><i class="icon-x icon-x10"></i></a>
      </div>
      <h1 class="weui-header-title">菜品评价</h1>
    </div>

     <div class="evaluate-result">
	     <p class="col999" style="padding: 0 10px;">您最喜欢的菜品是:</p>

     <div class="order-list" v-for="item in commentList">
      <div class="order-box">

        <div class="order-content clearfix">
          <div class="bottom-line">
            <div class="left-pic">
                <img :src="item.dishesUrl" class="store-logo" v-if="item.dishesUrl">
                <img src="../images/nodish.png" class="store-logo" v-if="!item.dishesUrl">
            </div>
            <div class="order-item">
              <div style="height:30px;line-height:30px;">
                <p class="storename2">{{item.dishesName}}<span v-show="item.propertyName!=''">{{item.propertyName}}</span></p>
                <p class="totalprice">¥ {{item.price}}</p>
              </div>
              <div class="sale-like clearfix">
                <p>月销量 <span class="col666">{{item.monthNumber}}</span>单</p>
                <p>喜欢TA <span class="col666">{{item.likeNumber}}</span>人</p>
              </div>
            </div>
            </div>

        </div>
      </div>

        <div class="same-like">
          <p class="col999" style="line-height:34px;">同样喜欢它的百味云网友:</p>
          <div class="who-like">
              <ul>
                <li v-for="subitem in item.userList"><img :src="subitem.headImgUrl" v-if="subitem.headImgUrl"><img src="../images/default_head.png" v-if="!subitem.headImgUrl"></li>
                <li><img src="../images/more-circle.png" v-if="item.userList.length > 7"></li>
              </ul>
          </div>
        </div>
    </div>

   </div>
</div>
</template>

<script type="text/ecmascript-6">
    import weuiHeader from '../components/weuiHeader';
    import Vue from 'vue'
    import { Toast } from 'mint-ui';
    Vue.component(Toast.name, Toast);

 const SUCCESS = 200;
    export default {
      data() {
          return {
            commentList:[]
          }
        },
        activated(){
          this._getEvaluateResult();
       },
        methods: {
          _getEvaluateResult(){
            const _this = this;
            let orderId = this.$route.query.orderId;
            let token = localStorage.getItem("token");
            let storeId = localStorage.getItem("storeId");

            this.$http({
              method:'get',
              url:'/fastfood/findOrderEvaluateInfo?orderId='+orderId +'&storeId='+storeId,
              headers: {'Authorization':'Basic '+ token }
            }).then((res) => {
              if(res.data.code==SUCCESS){
                _this.commentList = res.data.model;
              }else{
                Toast(res.data.message);
              }
            });
          },
          goDetail(){
            let orderId = this.$route.query.orderId;
            this.$router.push({ name: 'orderDetail', query: { orderId: orderId}})
          }
        },
       components: {
          weuiHeader
       }
      
    };
</script>

<style lang="less" scoped>

.evaluate-result {
	padding-top:60px;

   .order-list {
      margin-top: 15px;
      background: white;

    }

    .order-box {
      margin-bottom: 10px;
      background: white;
    }

   .order-content {
    padding: 0 10px;
    display:flex;
  }
   .left-pic {
    height: 98px;
    line-height:98px;
    flex:1;
  }
  .store-logo {
    width: 70px;
    height: 70px;
    vertical-align:middle;

  }
   .order-item {
    padding-top:12px;
    padding-left:10px;
    flex:4;
  }
   .storename2 {
    font-size: 16px;
    font-weight: bold;
    float:left;
  }

  .sale-like{
    color:#999;
    font-size:14px;
    margin-top:4px;
    letter-spacing:2px;

      p {
        line-height: 20px;
      }
  }

   .totalprice {
    float: right;
    color:#e46926;
  }

  .bottom-line {
    height: 100%;
    width: 100%;
    position: relative;
    display:flex;
    &:before {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #dedede;
            color: #dedede;
            -webkit-transform-origin:0 100%;
            transform-origin:0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
  }

  .same-like{
    padding:0 10px;
    background:white;

      .who-like {
        width:100%;
        height:40px;
        background:white;
      }

      ul {
        float:left;
        background: white;
         li {
            float:left;
            margin-right:12px;
            img {
              width: 30px;
              height:30px;
              border-radius: 50%;
            }
          }
      }
  }
}
	
</style>
